<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Toggle - UIkit tests</title>
        <script src="js/test.js"></script>
    </head>

    <body>

        <div class="uk-container">

            <h1>Toggle</h1>

            <div class="uk-child-width-1-5@m" uk-grid>
                <div>

                    <h3>One item</h3>

                    <p>
                        <button class="uk-button uk-button-default" type="button" uk-toggle="target: #toggle1">Button</button>
                        <a href uk-toggle="target: #toggle1">Link</a>
                    </p>

                    <p id="toggle1">What's up?</p>

                </div>
                <div>

                    <h3>Two items</h3>

                    <button class="uk-button uk-button-default" type="button" uk-toggle="target: ~">Toggle</button>

                    <p>Hello!</p>
                    <p hidden>Bazinga!</p>

                </div>
                <div>

                    <h3>Multiple toggles</h3>

                    <div class="toggle3">
                        <button class="uk-button uk-button-default" type="button" uk-toggle="target: .toggle3">Next</button>
                        <p>Hello!</p>
                    </div>

                    <div class="toggle3" hidden>
                        <button class="uk-button uk-button-default" type="button" uk-toggle="target: .toggle3">Previous</button>
                        <p>Bazinga!</p>
                    </div>

                </div>
                <div>

                    <h3>Multiple targets</h3>

                    <button class="uk-button uk-button-default uk-margin uk-display-block" uk-toggle="target: ~">Go</button>

                    <span>What's up?</span>
                    <span>Hello!</span>
                    <p hidden>Bazinga!</p>

                </div>
                <div>

                    <h3>Custom class</h3>

                    <button class="uk-button uk-button-default" uk-toggle="target: +; cls: uk-alert-success">Toggle</button>

                    <p class="uk-alert">What's up?</p>

                </div>
                <div>

                    <h3>Animation</h3>

                    <button class="uk-button uk-button-default" uk-toggle="target: +; animation: uk-animation-fade">Toggle</button>

                    <p>Animation</p>

                </div>
                <div>

                    <h3>In/Out Animations</h3>

                    <button class="uk-button uk-button-default" type="button" uk-toggle="target: +; animation: uk-animation-slide-left, uk-animation-slide-top">Toggle</button>

                    <p>Animation</p>

                </div>
                <div>

                    <h3>Queued</h3>

                    <button class="uk-button uk-button-default" type="button" uk-toggle="target: ~; animation: uk-animation-fade; duration: 500; queued: true">Queued</button>

                    <p>Animation</p>
                    <p hidden>Bazinga!</p>

                </div>
                <div class="uk-width-expand@m">

                    <h3>Mode Media</h3>

                    <div class="uk-alert uk-alert-danger" uk-toggle="cls: uk-alert-success uk-alert-danger; mode: media; media: @xl">
                        Only visibly @xl
                    </div>

                </div>
                <div>

                    <h3>Mode Hover</h3>

                    <button class="uk-button uk-button-default" type="button" uk-toggle="target: ~; mode: hover">Hover, Focus</button>

                    <p>What's up?</p>
                    <p hidden>Hovered, Focused</p>

                </div>
            </div>

            <h2>JavaScript Options</h2>

            <div class="uk-overflow-auto">
                <table class="uk-table uk-table-striped">
                    <thead>
                        <tr>
                            <th>Option</th>
                            <th>Value</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>target</code></td>
                            <td>CSS selector</td>
                            <td>false</td>
                            <td>The element(s) to toggle.</td>
                        </tr>
                        <tr>
                            <td><code>mode</code></td>
                            <td>String</td>
                            <td>click</td>
                            <td>Comma-separated list of trigger behaviour modes (hover, click, media).</td>
                        </tr>
                        <tr>
                            <td><code>media</code></td>
                            <td>Boolean, Number, String</td>
                            <td>false</td>
                            <td>Condition to trigger the toggle in media mode - a width as integer (e.g. 640) or a breakpoint (e.g. @s, @m, @l, @xl) or any valid media query (e.g. (min-width: 900px)).</td>
                        </tr>
                        <tr>
                            <td><code>cls</code></td>
                            <td>String</td>
                            <td>false</td>
                            <td>The class that is being toggled. Defaults to the "hidden" attribute.</td>
                        </tr>
                        <tr>
                            <td><code>animation</code></td>
                            <td>String</td>
                            <td>false</td>
                            <td>Space-separated names of animations. Comma-separated for animation out.</td>
                        </tr>
                        <tr>
                            <td><code>duration</code></td>
                            <td>Number</td>
                            <td>200</td>
                            <td>The animation duration.</td>
                        </tr>
                        <tr>
                            <td><code>queued</code></td>
                            <td>Boolean</td>
                            <td>true</td>
                            <td>Toggle the targets successively.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>

    </body>
</html>
